<template>
  <div class="song">
   <div>
        <h1>推荐歌单</h1>
      <ul class="song-top">
          <li v-for="(tabs,index) in tab" :key="index" @click='tab1(index,tabs.id)' :class="{active:index==shows}">{{tabs.name}}
          </li>
         
      </ul>
      <p @click="send1">更多></p>
   </div>
      <ul class="song-buttom">
          <li v-for="(item,index) in list" :key="index" @click='send(item.id)'>
              <img src="../../assets/img/open.png" alt="" id="img">
              <img :src="item.pic" alt="" id="img1">
              <p>{{item.name}}</p>
          </li>
      </ul>
  </div>
</template>

<script>

import {songlist,playlist} from '../../api/index.js'
export default {

    data(){
        return {
            tab:[],
            shows:0,
            // shouwse:'155',
            list:[],
            targ:'366'
            
        }
       
    },
   
    methods:{
        //tab切换
        tab1(i,j){
            this.shows=i
            this.targ=j
            console.log(j);
            
            
              

        },
        //跳转歌单详情
        send(i){
            this.$router.push({
                path:'/songlist',
                query:{
                    sheet:i
                }
            })
        },
        //跳转歌单
        send1(){
            this.$router.push({
                path:'/songsheet'
            })
        },
        //list api
        song(){
            
             this.axios.get(`${songlist}/${this.targ}?rn=6`).then(res=>{
            this.list=res.data.data.list
        }).catch(err=>{
            console.log(err);
        })
        },
        //tab api
        play(){
            this.axios.get(playlist).then(res=>{
                this.tab=res.data.data
            }).catch(err=>{
                console.log(err);
            })
        }

        
    },
    created(){
       this.song()
       this.play()
   
    },
    watch:{
       targ:{
            handler(){
            this.song()
            console.log(111);
        },
        immediate:true
       }
    }
}
</script>

<style lang="scss" scoped>
.song{
    width: 1400px;
    margin: 50px auto;
  
    div{
        display: flex;
        p{
            margin-top: 10px;
            margin-left: 20px;
        }
        
    }
     
    .song-top{
        display: flex;
        
       li{
           margin-left: 20px;
           line-height:40px;
            cursor: pointer;
          
       }
    }
    .song-buttom{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        overflow: hidden;
        li{
             width: 217px;
             overflow: hidden;
             height: 247px;
             position: relative;
              cursor: pointer;
            
             #img1{
               width: 217px;
               height: 217px;
                // background:red;
                transition:all .6s;
                -webkit-transition:all .6s;
                
           }
            #img1:hover{
                    transform: scale(1.05);
                 
                }
           p{
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
           }
           #img{
              width: 48px;
              height: 48px;
            //   background-color: #fff;
              position: absolute;
              top: 35%;
              left: 35%;
              z-index: 99;
                transition:all .6s;
                -webkit-transition:all .6s;
             
           }
            #img:hover{
                    transform: scale(1.05);
                 
                }
        }
    }
   .active{
       font-size: 17px;
       font-weight: 800;
   }
   
}
</style>